<template>
	<view class="friendListWp">
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabsList" @click="changeTabs" lineWidth="30rpx" lineHeight="4" lineColor="#276AEE"
				:activeStyle="{color:'#276AEE'}"></u-tabs>
		</u-sticky>
		<u-transition :show="true" mode="fade-left">
			<view class="friendList">
				<view class="listWp" v-if="newFriendList.length>0">
					<view class="itemWp" v-for="(item,index) in newFriendList" :key="index">
						<view class="mainCon">
							<view class="leftWp">
								<view class="imgWp">
									<img :src="item.head" alt="">
								</view>
								<view class="infoWp">
									<view class="name">
										{{item.name?item.name:''}}
									</view>
									<view class="remarkWp">
										<view class="time">
											时间: <text
												style="color: #4E5969;margin-left: 15rpx;">{{item.createTime?item.createTime:''}}</text>
										</view>
										<view class="remark">
											备注:
											<text
												style="color: #4E5969; margin-left: 15rpx;">{{item.remark?item.remark:''}}</text>
										</view>
									</view>

								</view>

							</view>
							<view class="rightWp">
								<view class="check" @click="goToFriendPage(item)">
									查看名片
								</view>
							</view>
						</view>
						<view class="optionConWp" v-if="item.status==0">
							<u-line dashed></u-line>
							<view class="optionCon">
								<view class=" optionBtn" @click='disAgreeAdd(item)' style="color:#F53F3F;">
									拒绝添加
								</view>
								<view class="optionBtn" @click="agreeAdd(item)" style="color:#276AEE;">
									同意添加
								</view>
							</view>

						</view>

					</view>
				</view>
				<view v-else>
					<nodata></nodata>
				</view>
			</view>
		</u-transition>
		<!-- 弹窗 -->
		<u-popup :show="showMoreListPopup" :round="30" @close='hiddenMoreListPopup' mode="bottom"
			:closeOnClickOverlay='true' closeable>
			<view class="modelTitle">
				申请添加为你的好友
			</view>
			<view class="moreItem">
				<view class="left">
					<image :showLoading="true" :src="itemInfo.head" class="leftImg"></image>
				</view>
				<view class="right">
					<view>
						<view>
							<text> {{itemInfo.name}}</text>
							<text style="margin-left: 30rpx;color: #666;font-size: 24rpx;"> {{itemInfo.position}}</text>
						</view>
						<view>
							{{itemInfo.moblie?itemInfo.moblie:''}}
						</view>
					</view>
					<view class="company">
						<view style="padding-bottom: 6rpx;">
							{{itemInfo.company}}
						</view>
						<view style="color: #666;font-size: 24rpx;">
							{{itemInfo.address}}
						</view>
					</view>
				</view>
			</view>
			<!-- 操作栏 -->
			<view class="operateList">
				<view class="btnWp">
					<u-button type="danger" :plain="true" color="#FE3B3B" @click='disAgreeAdd'>拒绝添加</u-button>
				</view>
				<view class="btnWp">
					<u-button type="primary" color="#423CFE" @click="agreeAdd">同意添加</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import nodata from '@/pagesCard/components/nodata/nodata.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				searchVal: '',
				itemInfo: {},
				newFriendList: [],
				friendStatus: 0,
				needId: '',
				tabsList: [{
						name: '未处理'
					},
					{
						name: '已添加'
					},
					{
						name: '已拒绝'
					},
				],
				pageNo: 1,
				total: 0,
				pageSize: 10
			};
		},
		onLoad() {
			this.queryNewFriendList()
		},
		onReachBottom() {
			if (this.pageNo * this.pageSize < this.total) {
				this.pageNo++
				this.queryNewFriendList()
			}

		},
		methods: {

			changeTabs({
				index
			}) {
				uni.showLoading({

				})
				this.friendStatus = index
				this.newFriendList = []
				this.total = 0
				this.pageNo = 1
				this.queryNewFriendList()
			},
			// 查询新增好友
			async queryNewFriendList() {
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
				}
				let payload = {
					openId: this.openId,
					status: this.friendStatus,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				let res = await this.$api.queryNewFriendList(payload)
				if (res.success) {
					this.newFriendList = [...this.newFriendList, ...res.result.records]
					this.total = res.result.total
					console.log(this.newFriendList, ' 查询新增好友');
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.newFriendList = []
					this.total = 0
				}
				uni.hideLoading()
			},

			//同意添加
			async agreeAdd(item) {
				let res = await this.$api.auditNewFriend(item.id, 1)
				if (res.success) {
					uni.showToast({
						title: '已同意',
						icon: 'none'
					});
					this.newFriendList = []
					this.total = 0
					this.pageNo = 1
					this.queryNewFriendList()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			//拒绝
			async disAgreeAdd(item) {
				let res = await this.$api.auditNewFriend(item.id, 2)
				if (res.success) {
					uni.showToast({
						title: '已拒绝',
						icon: 'none'
					});
					this.newFriendList = []
					this.total = 0
					this.pageNo = 1
					this.queryNewFriendList()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			goToFriendPage({
				friendId,
				friendOpenId,
				friendUnionId
			}) {

				if (friendId) {
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${friendId}&openId=${friendOpenId}&unionId=${friendUnionId}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.friendListWp {
		min-height: 100vh;

		.friendList {
			min-height: 100vh;
			background-color: #f2f3f5;
			padding: 20rpx;
			overflow: auto;

			.title {
				height: 44rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #1D2129;
				line-height: 45rpx;

			}

			.listWp {
				overflow: auto;

				.itemWp {
					margin-bottom: 24rpx;
					padding: 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;

					.mainCon {
						display: flex;
						justify-content: space-between;

						.leftWp {
							flex: 1;
							display: flex;
							align-items: center;

							.imgWp {
								width: 100upx;
								height: 100upx;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.infoWp {
								flex: 1;
								margin-left: 30upx;

								.name {

									height: 44rpx;
									font-size: 32rpx;
									font-weight: 600;
									color: #1D2129;
									line-height: 45rpx;

								}

								.remarkWp {

									width: 100%;

									.remark {
										height: 34rpx;
										line-height: 34rpx;
										font-size: 24upx;
										font-weight: 400;
										color: #86909C;
										margin-top: 18rpx;
										margin-right: 16rpx;

									}

									.time {
										margin-top: 18rpx;
										padding: 5upx;
										height: 34rpx;
										line-height: 34rpx;
										font-size: 24upx;
										font-weight: 400;
										color: #86909C;

									}
								}
							}
						}

						.rightWp {
							width: 160upx;

							.check {
								color: $u-primary;
								background-color: #e9f0fd;
								border-radius: 8upx;
								text-align: center;
								padding: 10upx;
								font-size: 24upx;
							}

							.text {
								padding: 5upx 0;
								border-radius: 8upx;
								text-align: center;
								font-size: 24upx;
								font-weight: 400;
								color: #999999;
							}
						}
					}

					.optionConWp {
						margin-top: 20rpx;

						.optionCon {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.optionBtn {
								height: 64rpx;
								line-height: 80rpx;
								flex: 1;
								text-align: center;
								font-size: 28rpx;
								font-weight: 400;
							}

						}


					}


				}
			}
		}

		.modelTitle {
			margin-top: 30upx;
			text-align: center;
			font-size: 30upx;
			font-weight: 400;
			color: #000000;
		}

		.moreItem {
			display: flex;
			align-items: center;
			margin: 30upx;
			padding: 15upx 0;
			border-bottom: 1upx solid #eee;

			.left {
				padding-right: 30upx;

				.leftImg {
					width: 110upx;
					height: 110upx;
				}
			}

			.right {
				.name {
					width: 91upx;
					height: 29px;
					font-size: 30upx;
					font-weight: 500;
					color: #000000;
					line-height: 36upx;
				}

				.title {
					padding-left: 22upx;
					font-size: 18upx;
					font-weight: 400;
					color: #666666;
					line-height: 36upx;
				}

				.company {
					padding-top: 22upx;
					font-size: 24upx;
					font-weight: 400;
					color: #333333;
					line-height: 36upx;
				}
			}
		}

		.operateList {
			display: flex;
			justify-content: space-evenly;
			margin: 30upx;

			.btnWp {
				width: 300upx;
			}
		}
	}
</style>